<template>
  <div class="successful-case-detail">
    <TitleBar title="成功案例详情"></TitleBar>
    <header class="successful-detail-header">
      <CatNameTitle :catName="catName" :year="year" theme="brown"></CatNameTitle>
    </header>
    <div class="successful-detail-list">
      <SuccessfulBrandItem v-for="item in brandList" :key="item.itemId" :shortName="item.title" :name="item.company" :address="item.address" :site="item.homepage" :ranking="item.ranking" :img="item.thumb" :itemId="item.itemId"></SuccessfulBrandItem>
    </div>
    <ReturnItem></ReturnItem>
    <MyFooter :introduceShow="true"></MyFooter>
  </div>
</template>

<script>
import TitleBar from '../../components/TitleBar'
import CatNameTitle from '../../components/CatNameTitle'
import SuccessfulBrandItem from './components/SuccessfulBrandItem'
import MyFooter from '../../components/MyFooter'
import ReturnItem from './components/ReturnItem'
import * as events from '../../store/events'

export default {
  components: {
    CatNameTitle,
    TitleBar,
    SuccessfulBrandItem,
    MyFooter,
    ReturnItem
  },
  data() {
    return {
      catName: '',
      year: 2019,
      brandList: []
    }
  },
  mounted() {
    this.$showLoading()
    this.$api.postCaseDetail(this.$route.params.catid).then(data => {
      this.$hideLoading()
      // 解决ios回退白屏的问题，勿删
      window.scrollTo(0, 1)
      window.scrollTo(0, 0)
      if (data.data.status == 1) {
        this.catName = data.data.catInfo.catname
        this.year = Number(data.data.catInfo.year)
        this.brandList = data.data.brandList
        this.$store.commit(events.SET_CAT_NAME, this.catName)
        // 客服数据
        let service = {
          email: data.data.setting.service_email,
          tel: data.data.setting.service_tel
        }
        // 客服数据存到store中
        this.$store.commit(events.SET_SERVICE_INFO, service)
      }
    })
  }
}
</script>

<style scoped lang="scss">
.successful-case-detail {
  .successful-detail-header {
    width: 100%;
    height: 5.1rem;
    background: url(./assets/successful-case-header.png) center no-repeat;
    background-size: cover;
    padding-top: 0.6rem;
  }
  .successful-detail-list {
    padding: 0.3rem 0 0.05rem;
    background-color: #f6f6f6;
    border-radius: 0.2rem 0.2rem 0 0;
    margin-top: -0.2rem;
  }
}
</style>
